<template>
<div class="order-container">
  <el-card style="margin:10px 0;">
    <div style="float: left;margin-right: 50px;">
      <h1>{{formatStatus(0)}}</h1>
    </div>
    <el-button @click="loadData(0)">全部</el-button>
    <el-button @click="loadData(1)" type="primary">待付款</el-button>
    <el-button @click="loadData(2)" type="success">待发货</el-button>
    <el-button @click="loadData(3)" type="info">待收货</el-button>
    <el-button @click="loadData(5)" type="warning">待处理</el-button>
    <el-button @click="loadData(8)">已完成</el-button>
  </el-card>
  <el-card>
    <el-table :data="tableData" border >
      <el-table-column prop="orderId" label="订单ID" width="120" />
      <el-table-column prop="totalAmount" label="总金额" width="120">
        <template #default="{ row }">¥{{ row.totalAmount.toFixed(2) }}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="150">
        <template #default="{ row }">{{ formatStatus(row.status) }}</template>
      </el-table-column>
      <el-table-column prop="productNum" label="商品数量" width="100" /><el-table-column label="创建时间">
        <template #default="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template #default="scope">
          {{ formatDate(scope.row.updatedAT) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button
            v-if="row.status === 2"
            type="primary"
            size="small"
            @click="handleShip(row.orderId)"
          >发货</el-button>

          <el-button
            v-if="row.status === 5"
            type="warning"
            size="small"
            @click="handleProcess(row.orderId)"
          >处理</el-button>

          <el-button
            type="info"
            size="small"
            @click="viewDetail(row.orderId)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-drawer v-model="drawerVisible" title="订单商品明细" size="40%">
    <el-table :data="products" border>
      <el-table-column prop="productId" label="ID" />
      <el-table-column prop="productName" label="商品名称" />
      <el-table-column prop="productPrice" label="单价" />
      <el-table-column prop="productQuantity" label="数量" />
      <el-table-column prop="currentPrice" label="成交价" />
    </el-table>
  </el-drawer>
</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {getBrandOrders, getOrderProducts, updateOrderStatus, updateProduct} from '@/common/net/api'
import {ElMessage, ElMessageBox} from 'element-plus'
import moment from 'moment/moment'
const drawerVisible = ref(false)
const products = ref([])
type OrderItem = import('@/common/types/orderTypes').OrderItem
let currentStatus = ref(0)
const tableData = ref<OrderItem[]>([])

// 状态映射
const formatStatus = (status: number) => {
  const statusMap: Record<number, string> = {
    0:'全部',
    1: '待付款',
    2: '待发货',
    3: '待收货',
    4: '待评价',
    5: '退款/售后',
    6: '已取消'
  }
  return statusMap[status] || 0
}
const formatDate = (dateString: any) => {
  return moment(dateString).format('YYYY/MM/DD HH:mm:ss');
};
// 获取订单数据
const loadData = async (status: number) => {
  let current =1;
  let size =10;
  try {
    const { data } = await getBrandOrders({status, current, size})
    tableData.value = data.data.records
  } catch (error) {
    ElMessage.error('数据加载失败')
  }
}

// 发货处理
  const handleShip = async (orderId: number) => {
  console.log('处理发货:', orderId)
  // 调用发货API
  ElMessageBox.confirm('确定发货？', '发货', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      await updateOrderStatus( orderId,3).then(res=>{
        if (res.data.state){
          ElMessage.success('发货成功');
          loadData(0);
        }else{
          ElMessage.error('发货失败');
        }
      });
    } catch (error) {
      ElMessage.error('发货失败');
    }

  });
}

// 售后处理
const handleProcess = (orderId: number) => {
  console.log('处理售后:', orderId)
  // 调用售后处理API
}

// 查看详情
const viewDetail =async (orderId: number) => {
  console.log('查看详情:', orderId)
  drawerVisible.value = true
  try {
    const { data } = await getOrderProducts(orderId)
    products.value = data.data
  } catch (error) {
    ElMessage.error('数据加载失败')
  }
  // 跳转到详情页
}

onMounted(() => loadData(0))
</script>
